<template>
<div class="first_page">
    <div class="options_view shadow_view">
        <div class="options_item">
            <span class="prefix_text">门店名称:</span>
            <el-input v-model="storeName" size="small" placeholder="请输入门店名称" clearable @input="searchData" />
        </div>
        <div class="options_item">
            <span class="prefix_text">产品类型:</span>
            <el-select v-model="productCategory" placeholder="产品类型" clearable size="mini" @change="searchData">
                <el-option label="全部" value="" />
                <el-option v-for="item in productCategoryOptions" :value="item.id" :label="item.name" :key="item.id" />
            </el-select>
        </div>
        <div class="options_item">
            <el-button type="primary" icon="el-icon-search" size="small" @click="searchData">搜索</el-button>
        </div>
        <div class="options_item">
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </div>
    </div>
    <div class="statis_view">
        <div class="statis_item_view shadow_view" v-for="item in statisData" :key="item.label">
            <div class="statis_left">
                <div class="statis_label">{{item.label}}</div>
                <div class="statis_value">{{item.value}}</div>
                <div class="statis_sub">
                    <div class="statis_subLable">{{item.subLabel}}</div>
                    <div class="statis_subValue" :style="{color:(item.subValue.indexOf('-')!==-1)?'#f00':'#0f0'}">{{item.subValue+"%"}}</div>
                </div>
            </div>
            <div class="statis_icon">
                <img :src="item.icon" alt="">
            </div>
        </div>
    </div>
    <div class="echarts_container">
        <div class="left_echarts">
            <div class="order_trend_container shadow_view echarts_view">
                <div class="echarts_header">
                    <div class="echarts_title">订单趋势</div>
                    <div class="echarts_option">
                        <el-radio-group v-model="orderTrend" size="small" @change="loadOrderTrendData">
                            <el-radio-button :label="item.value" v-for="item in timeType" :key="item.value">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div class="echarts_item_container order_trend_echarts"></div>
            </div>
            <div class="left_bottom_echarts">
                <div class="income_trend_container shadow_view echarts_view">
                    <div class="echarts_header">
                        <div class="echarts_title">收益趋势</div>
                        <div class="echarts_option">
                            <el-radio-group v-model="incomeTrend" size="small" @change="loadIncomeTrendData">
                                <el-radio-button :label="item.value" v-for="item in timeType" :key="item.value">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="echarts_item_container income_trend_echarts"></div>
                </div>
                <div class="order_handle_container shadow_view echarts_view">
                    <div class="echarts_header">
                        <div class="echarts_title">订单处理</div>
                    </div>
                    <div class="echarts_item_container order_handle_echarts"></div>
                </div>
            </div>
        </div>
        <div class="ranking_container shadow_view echarts_view">
            <div class="echarts_header">
                <div class="echarts_title">门店排行</div>
                <div class="echarts_option">
                    <el-radio-group v-model="ranking" size="small" @change="loadRankingData">
                        <el-radio-button :label="item.value" v-for="item in timeType" :key="item.value">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="echarts_item_container ranking_echarts"></div>
        </div>
    </div>
</div>
</template>

<script>
import {
    getProductCategorys,
} from "@/api/vanger/skcommon";
import {
    orderYoy,
    benefitTrend,
    orderDeal,
    orderTrend,
    storeRank,
} from "@/api/vanger/first";
export default {
    data() {
        return {
            storeName: "",
            productCategory: "",
            productCategoryOptions: [],
            statisData: [{
                    label: "今日收入",
                    value: "--",
                    subLabel: "较昨日:",
                    subValue: "--",
                    icon: require("@/assets/first/今日收入.png")
                },
                {
                    label: "本月收入",
                    value: "--",
                    subLabel: "较上月:",
                    subValue: "--",
                    icon: require("@/assets/first/本月收入.png")
                },
                {
                    label: "今日订单",
                    value: "--",
                    subLabel: "较昨日:",
                    subValue: "--",
                    icon: require("@/assets/first/今日订单.png")
                },
                {
                    label: "本月订单",
                    value: "--",
                    subLabel: "较上月:",
                    subValue: "--",
                    icon: require("@/assets/first/本月订单.png")
                },
            ],
            timeType: [{
                    label: "本周",
                    value: "1"
                },
                {
                    label: "本月",
                    value: "2"
                },
                {
                    label: "全年",
                    value: "3"
                },
            ],
            orderTrend: "1",
            incomeTrend: "1",
            handleTrend: "1",
            ranking: "2",

        }
    },
    mounted() {
        this.getProductCategorysList();
        this.searchData();

    },
    methods: {
        searchData() {
            this.loadOrderYoyData();
            this.loadOrderTrendData();
            this.loadIncomeTrendData();
            this.loadOrderHandleData();
            this.loadRankingData();

        },
        loadOrderYoyData() {
            let params = {
                customerStoreName: this.storeName,
                productCategoryId: this.productCategory,
            }
            console.log(params);
            orderYoy(params).then(res => {
                console.log(res);
                let result = res.data;
                this.statisData[0].value = result.daySum + "";
                this.statisData[0].subValue = result.daySumYoy + "";
                this.statisData[1].value = result.monthSum + "";
                this.statisData[1].subValue = result.monthSumYoy + "";
                this.statisData[2].value = result.dayCou + "";
                this.statisData[2].subValue = result.dayCouYoy + "";
                this.statisData[3].value = result.monthCou + "";
                this.statisData[3].subValue = result.monthCouYoy + "";
                console.log(this.statisData);
            });
        },
        //订单趋势
        loadOrderTrendData() {
            let params = {
                customerStoreName: this.storeName,
                productCategoryId: this.productCategory,
                dateType: this.orderTrend,
            }
            console.log(params);
            orderTrend(params).then(res => {
                console.log(res);
                this.drawOrderTrendEcharts(this.jq(".order_trend_echarts")[0], res.data);
            });

        },
        drawOrderTrendEcharts(dom, echartsData) {
            // echartsData = {
            //     xdata: ["10-12", "10-13", "10-14", "10-15", "10-16", "10-17", "10-18"],
            //     ydata: [{
            //             name: "维修",
            //             data: [12, 34, 30, 45, 25, 34, 40]
            //         },
            //         {
            //             name: "安装",
            //             data: [10, 14, 20, 42, 25, 24, 43]
            //         },
            //         {
            //             name: "保养",
            //             data: [32, 24, 30, 34, 21, 39, 20]
            //         },
            //         {
            //             name: "调试",
            //             data: [16, 33, 36, 41, 25, 33, 40]
            //         },
            //         {
            //             name: "换货",
            //             data: [22, 37, 10, 42, 23, 24, 30]
            //         },
            //         {
            //             name: "搬运",
            //             data: [12, 34, 35, 46, 27, 44, 46]
            //         },
            //         {
            //             name: "拆除",
            //             data: [19, 32, 39, 49, 22, 24, 49]
            //         },
            //     ]
            // }
            let dataTotal = [{
                    name: "维修",
                    data: []
                },
                {
                    name: "安装",
                    data: []
                },
                {
                    name: "保养",
                    data: []
                },
                {
                    name: "调试",
                    data: []
                },
                {
                    name: "换货",
                    data: []
                },
                {
                    name: "搬运",
                    data: []
                },
                {
                    name: "拆除",
                    data: []
                },
            ];
            let xdata = [];
            let seriesData = []
            for (let index = 0; index < echartsData.length; index++) {
                const element = echartsData[index];
                if (!(xdata.indexOf(element.x) !== -1)) {
                    xdata.push(element.x);
                }

            }
            for (let index = 0; index < dataTotal.length; index++) {
                const element = dataTotal[index];
                let data = [];
                for (let x = 0; x < xdata.length; x++) {
                    const cell = xdata[x];
                    let res = 0;
                    for (let y = 0; y < echartsData.length; y++) {
                        const item = echartsData[y];
                        if (cell == item.x && element.name == item.ext) {
                            res = item.y;
                        }
                    }
                    data.push(res);
                }
                var dic = {
                    name: element.name,
                    data: data,
                    type: 'line',
                    smooth: true,
                }
                seriesData.push(dic);
            }
            let myChart = this.echarts.getInstanceByDom(dom);
            if (!myChart) {
                myChart = this.echarts.init(dom);
            }
            var option = {
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    top: "10"
                },
                xAxis: {
                    type: 'category',
                    data: xdata,
                    axisLabel: {
                        interval: 0,
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                grid: {
                    left: 50,
                    right: 50,
                    top: 40,
                    bottom: 20,
                },
                series: seriesData,
            };
            myChart.setOption(option, true);
        },
        //收益趋势
        loadIncomeTrendData() {
            let params = {
                customerStoreName: this.storeName,
                productCategoryId: this.productCategory,
                dateType: this.incomeTrend,
            }
            console.log(params);
            benefitTrend(params).then(res => {
                console.log(res);
                this.drawIncomeTrendEcharts(this.jq(".income_trend_echarts")[0], res.data);
            });

        },
        drawIncomeTrendEcharts(dom, echartsData) {
            // echartsData = {
            //     xdata: ["10-12", "10-13", "10-14", "10-15", "10-16", "10-17", "10-18"],
            //     ydata: [{
            //         name: "收益",
            //         data: [12, 34, 30, 45, 25, 34, 40]
            //     }, ]
            // }
            let xdata = [];
            let ydata = [];
            let seriesData = [];
            for (let index = 0; index < echartsData.length; index++) {
                const element = echartsData[index];
                xdata.push(element.x);
                ydata.push(element.y);
            }
            let dic = {
                name: "收益",
                data: ydata,
                type: 'line',
                smooth: true,
                areaStyle: {}
            }
            seriesData.push(dic);
            let myChart = this.echarts.getInstanceByDom(dom);
            if (!myChart) {
                myChart = this.echarts.init(dom);
            }
            var option = {
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                xAxis: {
                    type: 'category',
                    data: xdata,
                    axisLabel: {
                        interval: 0,
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                grid: {
                    left: 50,
                    right: 50,
                    top: 20,
                    bottom: 20,
                },
                series: seriesData,
            };
            myChart.setOption(option, true);
        },
        //订单处理
        loadOrderHandleData() {
            let params = {
                customerStoreName: this.storeName,
                productCategoryId: this.productCategory,
                dateType: this.handleTrend,
            }
            console.log(params);
            orderDeal(params).then(res => {
                console.log(res);
                this.drawOrderHandleEcharts(this.jq(".order_handle_echarts")[0], res.data);
            });

        },
        drawOrderHandleEcharts(dom, echartsData) {
            // echartsData = [{
            //         name: "待派单",
            //         value: "3"
            //     },
            //     {
            //         name: "服务中",
            //         value: "4"
            //     },
            //     {
            //         name: "已完成",
            //         value: "5"
            //     },
            //     {
            //         name: "已挂单",
            //         value: "6"
            //     },
            //     {
            //         name: "已超时",
            //         value: "7"
            //     },
            // ]
            let result = [];
            for (let index = 0; index < echartsData.length; index++) {
                const element = echartsData[index];
                let dict = {
                    name: element.x,
                    value: element.y,
                }
                result.push(dict);
            }
            let seriesData = [{
                name: "",
                radius: '50%',
                type: 'pie',
                data: result,
                radius: ['35%', '60%'],
                center: ['40%', '50%'],
                label: {
                    formatter: '{name|{b}}\n{value|{c}}',
                    rich: {
                        name: {
                            fontSize: 14,
                            color: '#000'
                        },
                        value: {
                            fontSize: 14,
                            color: '#000'
                        }
                    },
                },
            }];
            let myChart = this.echarts.getInstanceByDom(dom);
            if (!myChart) {
                myChart = this.echarts.init(dom);
            }
            var option = {
                
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#3ba272'],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    show: true,
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                },
                series: seriesData,
            };
            myChart.setOption(option, true);
        },
        //门店排行
        loadRankingData() {
            let params = {
                customerStoreName: this.storeName,
                productCategoryId: this.productCategory,
                dateType: this.ranking,
            }
            console.log(params);
            storeRank(params).then(res => {
                console.log(res);
                this.drawRankingEcharts(this.jq(".ranking_echarts")[0], res.data);
            });
        },
        drawRankingEcharts(dom, echartsData) {
            // echartsData = {
            //     xdata: ["门店1","门店2", "门店3", "门店4", "门店5", "门店6", "门店7"],
            //     ydata: [{
            //         name: "订单",
            //         data: [12, 25, 30, 45, 46, 49, 58]
            //     }, ]
            // }
            let xdata = [];
            let ydata = [];
            let seriesData = [];
            for (let index = 0; index < echartsData.length; index++) {
                const element = echartsData[index];
                xdata.push(element.x);
                ydata.push(element.y);

            }
            let dic = {
                name: "订单",
                data: ydata,
                type: 'bar',
            }
            seriesData.push(dic);
            let myChart = this.echarts.getInstanceByDom(dom);
            if (!myChart) {
                myChart = this.echarts.init(dom);
            }
            var option = {
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    show: false,
                },
                yAxis: {
                    type: 'category',
                    data: xdata,
                    axisLabel: {
                        interval: 0,
                    },
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                grid: {
                    left: 10,
                    right: 20,
                    top: 20,
                    bottom: 20,
                    containLabel: true,

                },
                series: seriesData,
            };
            myChart.setOption(option, true);
        },
        //获取产品类型
        getProductCategorysList() {
            getProductCategorys().then(response => {
                console.log(response);
                this.productCategoryOptions = response.data;
            });
        },
        resetQuery() {
            this.storeName = "";
            this.productCategory = "";
            this.searchData();
        },
    },
}
</script>

<style lang="scss" scoped>
.first_page {
    width: 100%;
    height: calc(100vh - 85px);
    position: relative;
    background-color: #f1f1f1;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .shadow_view {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 3px #aaa;
    }

    .options_view {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .prefix_text {
            white-space: nowrap;
            margin-right: 5px;
            font-size: 14px;

        }

        .options_item {
            display: flex;
            align-items: center;
            margin-left: 20px;
        }
    }

    .statis_view {
        margin-top: 15px;
        height: 150px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .statis_item_view {
            height: 100%;
            width: calc((100% - 50px)/4);
            padding: 10px 20px;
            box-sizing: border-box;
            display: flex;

            .statis_left {
                height: 100%;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .statis_label {
                    font-size: 16px;
                    font-weight: bold;
                }

                .statis_value {
                    margin-left: -3px;
                    font-size: 34px;
                    font-weight: bold;
                }

                .statis_sub {
                    display: flex;
                    align-items: center;

                    .statis_subLable {
                        font-size: 15px;
                        line-height: 20px;
                        font-weight: bold;
                        margin-right: 5px;
                    }

                    .statis_subValue {
                        font-size: 15px;
                        line-height: 20px;
                        font-weight: bold;
                    }
                }
            }

            .statis_icon {
                padding-top: 20px;
                width: 70px;
                height: 100%;
            }
        }
    }

    .echarts_container {
        flex: 1;
        width: 100%;
        margin-top: 15px;
        display: flex;

        .left_echarts {
            height: 100%;
            width: 65%;
            display: flex;
            flex-direction: column;

            .order_trend_container {
                height: 49%;
                width: 100%;
            }

            .left_bottom_echarts {
                flex: 1;
                width: 100%;
                margin-top: 15px;
                display: flex;
                justify-content: space-between;

                .income_trend_container {
                    height: 100%;
                    width: calc((100% - 15px)/2);
                }

                .order_handle_container {
                    height: 100%;
                    width: calc((100% - 15px)/2);
                }
            }
        }

        .ranking_container {
            height: 100%;
            flex: 1;
            margin-left: 15px;
        }

        .echarts_view {
            padding: 15px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .echarts_header {
                height: 40px;
                width: 100%;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;

                .echarts_title {
                    margin-top: 5px;
                    font-weight: bold;
                }
            }

            .echarts_item_container {
                flex: 1;
                width: 100%;
            }
        }
    }

}
</style>
